<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="header.jsp"></jsp:include>
    <link rel="stylesheet" href="Bootstrap/datepicker/bootstrap-datepicker3.css" type="text/css">
    <title>数据录入</title>
</head>
<body style="background-color: #EFF7FF;overflow-x:hidden">
<jsp:include page="top.jsp"></jsp:include>
<div class="row">
    <jsp:include page="menu.jsp"></jsp:include>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-4" style="left: 12px">
                <div class="input-group date" id="datepicker" data-date-format="yyyy-mm-dd">
                    <div class="input-group-addon">数据日期</div>
                    <input class="form-control" size="16" type="text" value="" readonly id="dateData">
                    <div class="input-group-addon"><span class="add-on glyphicon glyphicon-calendar"></span></div>
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="btnSubmit">提交 <span
                        class="glyphicon glyphicon-log-in"></span></button>
            </div>
        </div>
        <br>

        <div class="row">
            <div class="col-md-10" style="left: 12px;">
                <table class="table table-striped table-hover table-bordered" style="background-color: white">
                    <thead>
                    <tr>
                        <th style="width: 65px">省份</th>
                        <th>确诊人数</th>
                        <th>疑似人数</th>
                        <th>隔离人数</th>
                        <th>治愈人数</th>
                        <th>死亡人数</th>
                    </tr>
                    </thead>
                    <tbody id="tbody1">
                    <%--                    使用jq语句循环填入数据--%>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="row col-md-12">
            <div id="msg"></div>
        </div>
    </div>
</div>


<script src="${pageContext.request.contextPath}/Bootstrap/js/jquery-1.11.2.js"></script>
<script src="${pageContext.request.contextPath}/Bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="Bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="Bootstrap/datepicker/bootstrap-datepicker.zh-CN.min.js"></script>

<script>
    var provinces = null;
    $(function () {
        var datepicker = $("#datepicker");
        datepicker.datepicker({
            language: 'zh-CN',
            autoclose: true
        });
        var current = new Date();
        datepicker.datepicker("setDate", current);
        var before = new Date();
        before.setDate(current.getDate() - 7);
        datepicker.datepicker("setStartDate", before);
        datepicker.datepicker("setEndDate", current);
        //日期选择框发生变化时重新装载省份列表
        datepicker.datepicker().on("changeDate", loadProvinceList);
        //每次进入页面装载省份列表
        loadProvinceList();
        //给提交按钮绑定事件处理函数
        $("#btnSubmit").click(checkAndSubmitData);
    });

    function loadProvinceList() {
        //清空表格
        var tbody1 = $("#tbody1");
        tbody1.empty();
        //获取日期框内的日期值
        var date = $("#dateData").val();
        $.get("${pageContext.request.contextPath}/province/ajax/noDataList", {date: date}, function (resp) {
            if (resp.code < 0) {
                alert(resp.msg);
            } else {
                fillProvinceToTable(resp.data);
            }
        }, "json");
    }

    function fillProvinceToTable(array) {
        var that=this;
        //清空表格
        var tbody1 = this.$("#tbody1");
        tbody1.empty();
        this.$("#msg").empty();
        if (array && array.length > 0) {
            provinces = array;
            //填充省份到表格中
            var tbody1 = that.$("#tbody1");
            $.each(array, function (index, province) {
                var tr = $("<tr>");
                var td = $("<td>");
                td.html(province.provinceName);
                tr.append(td);

                td = $("<td>");
                td.html('<input type="number" style="font-size:20px;font-weight:bold;text-align:center;" name="affirmed" size="4" maxlength="4" class="form-control" value="0" onfocus= "if(this.value==\'0\'){this.value=\'\'}"  onblur="if(this.value==\'\'){this.value=\'0\'}" >');
                tr.append(td);

                td = $("<td>");
                td.html('<input type="number" style="font-size:20px;font-weight:bold;text-align:center;" name="suspected" size="4" maxlength="4" class="form-control" value="0"\n' +
                    '                                   onfocus=\'if(this.value=="0"){this.value=""}\'\n' +
                    '                                   onblur=\'if (this.value==""){this.value="0"}\'>');
                tr.append(td);

                td = $("<td>");
                td.html('<input type="number" style="font-size:20px;font-weight:bold;text-align:center;" name="isolated" size="4" maxlength="4" class="form-control" value="0"\n' +
                    '                                   onfocus=\'if(this.value=="0"){this.value=""}\'\n' +
                    '                                   onblur=\'if (this.value==""){this.value="0"}\'>');
                tr.append(td);

                td = $("<td>");
                td.html('<input type="number" style="font-size:20px;font-weight:bold;text-align:center;" name="cured" size="4" maxlength="4" class="form-control" value="0"\n' +
                    '                                   onfocus=\'if(this.value=="0"){this.value=""}\'\n' +
                    '                                   onblur=\'if (this.value==""){this.value="0"}\'>');
                tr.append(td);

                td = $("<td>");
                td.html('<input type="number" style="font-size:20px;font-weight:bold;text-align:center;" name="dead" size="4" maxlength="4" class="form-control" value="0"\n' +
                    '                                   onfocus=\'if(this.value=="0"){this.value=""}\'\n' +
                    '                                   onblur=\'if (this.value==""){this.value="0"}\'>');
                tr.append(td);

                tbody1.append(tr);
            })

        } else {
            $("#msg").html("本日所有省份均已录入数据");
        }
    }

    function checkAndSubmitData() {
        var affirmed = $("input[name=affirmed]");
        var suspected = $("input[name=suspected]");
        var isolated = $("input[name=isolated]");
        var cured = $("input[name=cured]");
        var dead = $("input[name=dead]");
        if (CheckIsNum(affirmed) && CheckIsNum(suspected) && CheckIsNum(isolated) && CheckIsNum(cured) && CheckIsNum(dead)) {
            //提交
            var dataArray = [];
            for (var i = 0; i < provinces.length; i++) {
                var obj = {};
                obj.provinceId = provinces[i].provinceId;
                obj.affirmed = affirmed.get(i).value;
                obj.suspected = suspected.get(i).value;
                obj.isolated = isolated.get(i).value;
                obj.cured = cured.get(i).value;
                obj.dead = dead.get(i).value;
                dataArray.push(obj);
            }
            var date = $("#dateData").val();
            var data = {};
            data.date = date;
            data.dataArray = dataArray;

            $.ajax({
                url: "${pageContext.request.contextPath}/epidemicData/ajax/input",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                dataType: "json",
                success: function (resp) {
                    if (resp.code < 0) {
                        alert(resp.msg);
                    } else {
                        fillProvinceToTable(resp.data);
                    }
                }
            })


        } else {
            alert("请检查输入是否为有效数字！");
        }
    }

    function CheckIsNum(element) {
        var valid = true;
        element.each(function () {
            if (isNaN($(this)[0].value)) {
                valid = false;
                return false;
            }
        });
        return valid;
    }

</script>

</body>
</html>
